<template>
  <div class="sys-bulletin-detail">
    <ots-content-header>
      <template #title>
        <icon-svg name="iconBulletin"></icon-svg>
        <span class="title-text">公告详情</span>
      </template>
    </ots-content-header>
    <div class="section">
      <div class="section-title">标题：</div>
      <div class="section-content">{{ bulletinTitle }}</div>
    </div>
    <div class="section">
      <div class="section-title">内容：</div>
      <div class="section-content">{{ bulletinContent }}</div>
    </div>
    <div class="section">
      <div class="section-title">备注：</div>
      <div class="section-content">{{ bulletinRemark || '无备注' }}</div>
    </div>
    <div class="section">
      <div class="section-title">创建人：</div>
      <div class="section-content">{{ createNm }}</div>
    </div>
    <div class="section">
      <div class="section-title">创建时间：</div>
      <div class="section-content">{{ createTm }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bulletinId: '',
      bulletinTitle: '',
      bulletinContent: '',
      bulletinRemark: '',
      createNm: '',
      createTm: ''
    }
  },
  created() {
    let bulletinId = this.$route.params.bulletinId
    if (bulletinId) {
      this.bulletinId = bulletinId
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl(`sys/sysBulletinInfo/${this.bulletinId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.bulletinTitle = data.data.bulletinTitle
          this.bulletinContent = data.data.bulletinContent
          this.bulletinRemark = data.data.bulletinRemark
          this.createNm = data.data.createNm
          this.createTm = data.data.createTm
          this.$store.commit('common/changeMainTabsTitle', {
            tabName: this.$route.name + '$' + this.bulletinId,
            title: data.data.bulletinTitle + '-' + this.$route.meta.title
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.sys-bulletin-detail {
  padding: 0 20px;
  .section {
    margin: 10px 0;
    position: relative;
    min-height: 25px;
    .section-title {
      padding-left: 20px;
      position: absolute;
    }
    .section-content {
      padding-left: 100px;
    }
  }
}
</style>
